<template>
  <view>
    <view class="page">
      <view class="title">充值金额</view>
      <view v-if="hasRec" class="rechage">
        <view v-for="(item, index) in rules" :key="index" class="rechage__item"
          :style="'border-color: ' + fontColor + ';background-color: ' + (item.id==activeRechargeId?fontColor:'') + ';color:  ' + (item.id!=activeRechargeId?fontColor:'#ffffff') + ';width:49%;'"
          @tap="selectRule" :data-id="item.id" :data-price="item.payAmount">
          <view class="rechage__item--content ">
            <view>充{{item.payAmount}}元</view>
            <view>送{{item.discountAmount}}元</view>
          </view>
        </view>
      </view>
      <view class="input" v-if="!hasRec">
        <input type="digit" style="text-align: center;" maxlength="11" :value="customPrice" @input="inputPrice"
          placeholder="请输入充值金额">
      </view>
      <view class="payNow">
        <view class="payNow__btn" :class="{'payNow__nbtn':!customPrice}" @tap="openMem">立即充值</view>
      </view>
    </view>
    <u-popup :show="payTypeFlag" @close="onClose" mode="bottom">
      <view class="payConter">
        <view class="payConter__top">
          <u-icon label="确认付款" labelColor="#000" labelSize="15" space="10" name="arrow-left"  @tap="onClose"></u-icon>
        </view>
        <view class="payConter__num">￥{{customPrice}}</view>
        <view class="payConter__openingMode ">
          <view>充值金额</view>
          <view>{{customPrice}}</view>
        </view>
        <view class="payConter__openingMode ">
          <view>赠送金额</view>
          <view>{{discountAmount || 0}}</view>
        </view>
        <view class="payConter__openingMode ">
          <view>到账金额</view>
          <view>{{getPrice}}</view>
        </view>
        <view class="payConter__openingMode ">
          <view>付款方式</view>
          <view>微信支付</view>
        </view>
        <view class="center">
          <view @tap="paySure" class="payConter__btn">确认付款</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    memberPay,
    getMemberPayRule
  } from "@/api/modules/member";

  @Component({})
  export default class LinkPage extends Vue {
    fontColor: string = "#B4893B"
    activeRechargeId: any = {}
    hasRec: boolean = true
    customPrice: number = 0
    rules: Array < any > = []
    getPrice: number = 0
    price: number = 0
    payTypeFlag: boolean = false // 购买弹窗
    discountAmount: number = 0 // 赠送金额

    // 页面周期函数--监听页面加载
    onLoad() {
      getMemberPayRule(null).then(data => {
        if (!data || (data.length === 1 && data[0].state === 0)) {
          this.setData({
            hasRec: false
          });
        } else {
          this.setData({
            hasRec: true,
            rules: data,
          });
        }
      });
    }

    /**
     * @method
     * @description 选择规则
     * @param {Object} e
     */
    selectRule(e) {
      const id = e.currentTarget.dataset.id;
      const price = e.currentTarget.dataset.price;
      const curSelect = this.rules.find((v: any) => v.id === id);
      this.setData({
        activeRechargeId: id,
        customPrice: parseFloat(price),
        price: parseFloat(price),
        getPrice: parseFloat(price) + parseFloat(curSelect.discountAmount),
        discountAmount: parseFloat(curSelect.discountAmount),
      });
    }

    /**
     * @method
     * @description 输入价格
     */
    inputPrice(e) {
      this.setData({
        customPrice: e.detail.value,
        getPrice: e.detail.value,
      });
      // this.filterRule();
    }

    /**
     * @method
     * @description 筛选符合规则
     */
    filterRule() {
      const price = this.customPrice;
      const rules = this.rules;
      const maps = rules.filter(v => {
        return v.payAmount <= price;
      });
      if (maps.length > 0) {
        this.setData({
          activeRechargeId: maps[maps.length - 1].id,
          discountAmount: parseFloat(maps[maps.length - 1].discountAmount),
        });
      } else {
        this.setData({
          activeRechargeId: null,
          discountAmount: 0,
        });
      }
    }

    /**
     * 弹起确认支付
     */
    openMem() {
      if (!this.customPrice) return null;
      this.setData({
        payTypeFlag: true
      });
      return null;
    }

    /**
     * 收起弹窗
     */
    onClose() {
      this.setData({
        payTypeFlag: false
      });
    }

    paySure() {
      memberPay({
          paymentType: 1,
          discountAmount: this.discountAmount,
          payAmount: this.customPrice,
        })
        .then(res => {
          uni.requestPayment({
            timeStamp: res.wxResult.timeStamp,
            nonceStr: res.wxResult.nonceStr,
            package: res.wxResult.packageValue,
            signType: res.wxResult.signType,
            paySign: res.wxResult.paySign,
            success: () => {
              this.setData({
                payTypeFlag: false
              });
              uni.showToast({
                title: "充值成功",
                icon: "success"
              });
              uni.navigateTo({
                url: `/subcontract/pages/memberVip/memberVip`,
              });
            },
            fail: e => {
              const isCancel = msg => msg.includes("cancel");
              if (!isCancel(e.errMsg)) {
                uni.showToast({
                  title: "支付失败"
                });
              }
            },
          });
        })
        .catch(err => {
          uni.showToast({
            title: err || "支付失败"
          });
        });
      return null;
    }
  }
</script>

<style lang="scss" scoped>
  @mixin middle-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page {
    padding-left: 30rpx;
    padding-right: 30rpx;
    height: 100vh;
    background: #FFF;
  }

  .title {
    font-size: 38rpx;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
  }


  .rechage {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;

    &__item {
      height: 140rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      border: 1rpx solid #d8dce5;

      &--content {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 38rpx;
      }
    }
  }

  .input {
    height: 100rpx;
    border-radius: 20rpx;
    margin-top: 40rpx;
    @include middle-center;
    background-color: #e5e5e5;
  }

  .payNow {
    display: flex;
    margin-top: 120rpx;
    justify-content: center;
  }

  .payNow__btn {
    width: 600rpx;
    height: 80rpx;
    background: linear-gradient(to right, #EBCC89, #B4893B);
    border-radius: 50rpx;
    color: white;
    font-size: 32rpx;
    @include middle-center;

  }

  .payNow__nbtn {
    background: #888;
  }

  .payConter {
    height: 650rpx;
    padding: 20rpx;
  }

  .payConter__top {
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }

  .payConter__num {
    padding: 40rpx;
    font-size: 80rpx;
    @include middle-center;
  }

  .payConter__openingMode {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    color: #666666;
    display: flex;
    justify-content: space-between;
  }

  .payConter__btn {
    margin: 50rpx auto 30rpx;
    width: 450rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background: linear-gradient(to right, #EBCC89, #B4893B);
    color: white;
    font-size: 30rpx;
    // box-shadow: 0px 0px 40px #FEDBDF;
    @include middle-center;
  }
</style>